<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 这个元素就是vue的作用范围 -->
    <!-- v-mode是vue的指令 -->
    <input type="text" v-model="msg">
    <!-- {{}}是vue的文本插值，可以写js的变量,可以包含的内容：变量替换，简单的运算，三元表达式，调用函数 -->
    <p>{{msg}}</p>
    <hr>
    <p>原价格：{{price}}元</p>
    <p>现价格：{{price * 0.95}}元</p>
    <p>{{age === 18 ? '你可以做一些成年人做的事了' : '你还小'}}</p>
    <p>{{sumNum(1,2)}}</p>
  </div>
  <!-- 1.引入vue -->
  <script src="../vue.js"></script>
  <!-- 2.写自己的js代码 -->
  <script>
    // 3. 实例化一个vue
    let vm = new Vue({
      // 4. 配置具体的选项
      el: '#app', // 5. el 被绑定的元素
      data: { // 6. vue中的所有数据
        msg: 'hello vue',
        price: 100,
        age: 14
      },
      // 方法，函数写在这里
      methods: {
        sumNum(num1, num2) {
          return num1 + num2
        }
      },
    });
  </script>
</body>
</html>